<template>
  <div>
    <div class="app-container">
      <el-form ref="form" :model="user" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="user.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item label="真实名字">
          <el-input v-model="user.trueName"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="user.email"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="user.phone"></el-input>
        </el-form-item>
        <el-form-item label="用户头像">
          <!-- 头像缩略图 -->
          <pan-thumb :image="image" />
          <!-- 文件上传按钮 -->
          <el-button
            type="primary"
            icon="el-icon-upload"
            style="position: absolute; bottom: 15px; margin-left: 40px"
            @click="imagecropperShow = true"
          >
            Change Avatar
          </el-button>
          <!-- 上传头像 
        v-show="imagecropperShow"控制是否弹出上传组件
        :key 类似id，唯一标识
        url:后台上传的地址
        @close="close" 关闭上传组件
        @crop-upload-success 上传成功后的回调 
        <input type="file" name="file"/>
        -->
          <image-cropper
            v-show="imagecropperShow"
            :key="imagecropperKey"
            :width="300"
            :height="300"
            url="/oss/upload/uploadImage"
            field="file"
            lang-type="en"
            @close="close"
            @crop-upload-success="cropSuccess"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">编辑</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
  
<script>
import userApi from "@/api/rbac/user";
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

export default {
  name: "",
  components: { ImageCropper, PanThumb },
  data() {
    return {
      user: {},
      //图片上传相关
      imagecropperShow: false,
      imagecropperKey: 0,
      image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
    };
  },
  created() {
    //从路径获取id值
    let id = this.$route.params.id;
    userApi.selectById(id).then((jsonResult) => {
      this.user = jsonResult.data;
      this.image = this.user.avatar;
    });
  },
  methods: {
    onSubmit() {
      console.log("submit!");
      userApi.update(this.user).then((jsonResult) => {
        if (jsonResult.ok) {
          this.$message({
            type: "success",
            message: jsonResult.msg,
          });
          //删除成功之后，跳转到列表界面
          this.$router.push({ path: "/rbac/user/list" });
        } else {
          this.$message({
            type: "error",
            message: jsonResult.msg,
          });
        }
      });
    },
    cropSuccess(resData) {
      console.log(resData)
      this.imagecropperShow = false
      this.imagecropperKey = this.imagecropperKey + 1
      this.user.avatar = resData
      this.image = resData
    },
    close() {
      this.imagecropperShow = false
    }
  },
};
</script>
 
<style scoped>
</style>